<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="format-detection" content="telephone=no, address=no, email=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<title>登录</title>
		<link rel="stylesheet" href="css/mui.min.css" type="text/css" charset="utf-8" />
		<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" />
		<style>
			.mui-bar-nav~.mui-content {
				padding: 0.4rem 0.54rem;
			}
			
			.mui-content,
			.mui-input-group,
			.mui-input-group .mui-input-row:after {
				background: none;
			}
			
			.mui-input-group .mui-input-row {
				background: #fff;
				border: 0.01rem solid #ddd;
				color: #999;
				height: 0.88rem;
				margin-bottom: 0.14rem;
				border-radius: 3px;
				padding: 0.15rem 0;
			}
			
			.mui-input-row label {
				width: 28%;
				line-height: 0.55rem;
				height: 0.55rem;
				padding: 0px;
				text-align: center;
				border-right: 1px solid #ddd;
			}
			
			.mui-input-row label~input {
				width: 72%;
				line-height: 0.55rem;
				height: 0.55rem;
				padding: 0 0.15rem;
			}
			.mui-input-row label{    text-align: left;padding-left: 0.23rem;}
			input[type=text],
			input[type=password] {
				height: 0.55rem;
			}
			
			.mui-input-row .mui-input-password~.mui-icon-eye {
				top: 0.2rem;
				height: 0.55rem;
			}
			
			#forgetPassword {
				float: right;
				margin-top: 0.31rem;
				transform: scale(1, 1);
				-webkit-transform: scale(1, 1);
				-moz-transform: scale(1, 1);
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav mui-header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">消息中心</h1>
		</header>
		<div class="mui-content">
			<div style="height:19.3rem;overflow: scroll;">
				<div id="refresh">
					<div class="historyList">
						<div>
							<ul class="historyUi">
								<li class="historyItem">
									<p class="opeate">入库</p>
									<p>操作时间：2016年12月27日 09:47:56</p>
									<p>操作人：张三 13588888888</p>
									<p>产品：小刀男人酒</p>
									<p>箱数：500</p>
								</li>
								<li>
									<p class="opeate">出库</p>
									<p>操作时间：2016年12月27日 09:47:56</p>
									<p>操作人：张三 13588888888</p>
									<p>产品：小刀男人酒</p>
									<p>箱数：500</p>
								</li>
								<li>
									<p class="opeate">入库</p>
									<p>操作时间：2016年12月27日 09:47:56</p>
									<p>操作人：张三 13588888888</p>
									<p>产品：小刀男人酒</p>
									<p>箱数：500</p>
								</li>
								<li>
									<p class="opeate">出库</p>
									<p>操作时间：2016年12月27日 09:47:56</p>
									<p>操作人：张三 13588888888</p>
									<p>产品：小刀男人酒</p>
									<p>箱数：500</p>
								</li>
								<li>
									<p class="opeate">入库</p>
									<p>操作时间：2016年12月27日 09:47:56</p>
									<p>操作人：张三 13588888888</p>
									<p>产品：小刀男人酒</p>
									<p>箱数：500</p>
								</li>
							</ul>
						</div>
					</div>
		
				</div>	
			</div>
			</div>

	</body>
	<script src="js/resize.js"></script>
	<script src="js/mui.min.js"></script>
	<script src="js/app.js"></script>
	<script type="text/javascript" src="js/update.js"></script>
	<script src="js/refresh.js"></script>
	<script>
		var contentWebview = null;
		document.querySelector('.mui-action-back').addEventListener('tap', function() {
			if(contentWebview == null) {
				contentWebview = plus.webview.currentWebview().children()[0];
			}
			contentWebview.evalJS("mui('#refresh').pullRefresh().scrollTo(0,0,100)");
		});

		newRefresh.initRefresh('#refresh', pullupRefresh, '', '');

		function pullupRefresh() {
			newRefresh.ajaxGetData('js/json/inoutInfo.json', '', '', formList);
		}
		var count = 0;

		function formList(list, params) {
			setTimeout(function() {
				mui('#refresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
				var table = document.body.querySelector('.historyUi');
				var cells = document.body.querySelectorAll('.historyItem');
				for(var i = 0, len = list.length; i < len; i++) {
					var temp = list[i];
					var li = document.createElement('li');
					li.className = 'historyItem';
					var html = '';
					html += '<p class="opeate">' + temp.operate + '</p>' +
						'<p>操作时间：' + temp.time + '</p>' +
						'<p>操作人' + temp.name + ' ' + temp.tel + '</p>'+
						'<p>产品：' + temp.product + '</p>' +
						'<p>箱数：' + temp.number + '</p>' ;
					li.innerHTML = html;
					table.appendChild(li);
				}
			}, 1500);
		}
	</script>

</html>